<template>
  <div>
    <cusDialog :title="unitsForm.unitCode ? '修改' : '添加'" headCss="float:left;" width="450px" ref="Dialog"
      @hideHandler="hideHandler" @confrim="confrimHandler">
      <el-form ref="unitFormRef" :model="unitsForm" :rules="rules" label-width="100px">
        <el-form-item label="上级单位">
          <div class="item-box">{{ unitsForm.parentUnitName }}</div>
        </el-form-item>
        <el-form-item label="单位名称" prop="unitName">
          <el-input v-model.trim="unitsForm.unitName" maxlength="30" clearable placeholder="请输入单位名称"></el-input>
        </el-form-item>
        <el-form-item label="单位地址">
          <el-input v-model.trim="unitsForm.address" maxlength="30" clearable placeholder="请输入单位地址"></el-input>
        </el-form-item>
        <el-form-item label="管理员账号" prop="loginName">
          <el-input v-model.trim="unitsForm.loginName" maxlength="30" clearable placeholder="请输入管理员账号"
            :disabled="unitsForm.unitCode ? true : false"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model.trim="unitsForm.contactName" maxlength="30" clearable placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="contactPhone">
          <el-input v-model="unitsForm.contactPhone" onkeyup="value=value.replace(/[^\d]/g,'')" clearable
            placeholder="请输入电话号码"></el-input>
        </el-form-item>
      </el-form>
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { reqModifyUnit, reqCreateUnit } from "@/api/business/units";
const router = useRouter();
// 表单初始值
const formOrigin = () => ({
  loginName: "", //管理员账号
  unitName: "", //单位名称
  contactPhone: "", //联系人
  contactName: "",
  address: "", //地址
  parentUnitCode: "", //上级单位编码
  parentUnitName: "",
  unitCode: "",
});
let unitsForm = ref(formOrigin());
const unitFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  unitName: { required: true, message: "请输入单位名称", trigger: "blur" },
  loginName: [
    { required: true, message: "请输入管理员账号", trigger: "blur" },
    {
      pattern: "^.{5,32}$",
      message: "账号长度为5-32位",
      trigger: "blur",
    },
  ],
  contactPhone: [
    {
      required: false,
      pattern: "^(0[0-9]{2,3}-[0-9]{7,8})$|^1[3456789][0-9]{9}$",
      message: "手机/电话号码格式不正确",
      trigger: "blur",
    },
  ],
});

const Dialog = ref(null);

const emits = defineEmits(["onInit"]);

//
const showHandler = () => {
  Dialog.value.show = true;
};

// 清空表单
const hideHandler = () => {
  unitsForm.value = formOrigin();
  unitFormRef.value.resetFields();
};

const confrimHandler = () => {
  unitFormRef.value.validate((valid, fields) => {
    if (valid) {
      if (unitsForm.value.unitCode) {
        getModifyUnit();
      } else {
        getCreateUnit();
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const getCreateUnit = () => {
  delete unitsForm.value.unitCode;
  delete unitsForm.value.parentUnitName;
  reqCreateUnit({
    ...unitsForm.value,
  }).then((res) => {
    if (res.code === 1) {
      ElMessage.success("添加成功");
      Dialog.value.show = false;
      emits("onInit");
    } else {
      ElMessage.info(res.msg);
    }
  });
};

// 修改
const getModifyUnit = () => {
  let { address, contactName, contactPhone, unitCode, unitName } =
    unitsForm.value;
  reqModifyUnit({
    address,
    contactName,
    contactPhone,
    unitCode,
    unitName,
  }).then((res) => {
    if (res.code === 1) {
      ElMessage.success("修改成功");
      Dialog.value.show = false;
      emits("onInit");
    } else {
      ElMessage.info(res.msg);
    }
  });
};
defineExpose({
  unitsForm,
  showHandler,
});
</script>

<style lang="scss" scoped>
.item-box {
  //styleName: 中文简体SB/H8;
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 600;
  color: #111111;
}
</style>